<template>
    <view id="bankCard">
        <view class="header-block"></view>
        <uni-swipe-action>
            <!-- <view class="content" :style="{background:item.color}" v-for="(item,index) in bankcardList" :key="index"> -->
                <uni-swipe-action-item v-for="(item,index) in bankcardList" :key="index" :options="options" @click="confirmUnBind(item.id)">
                    <view class="content" :style="{background:item.color}" >
                    <view v-if="item.cardType==1">
                        <view class="content-top">
                            <view class="content-title msfont" :class="item.icon"></view>
                            <view class="content-text">{{item.bankCard}}</view>
                        </view>
                        <view class="content-bottom">
                            <text class="secret-part">****    ****    ****   </text>  {{item.tailNumber}}
                        </view>
                    </view>
                    <view v-else class="content-ali-part">
                        <view class="content-title msfont" :class="item.icon"></view>
                        <view>
                            <view class="content-text">{{item.bankCard}}</view>
                            <text class="">{{item.card_name}}   {{item.phone}}</text>
                        </view>
                    </view>
                    </view>
                </uni-swipe-action-item>
            <!-- </view> -->
        </uni-swipe-action>
        <view class="block"></view>
        <view class="bottom">
          <view class="bottom-btn text-center" @click="addCard('bank')">
              <!-- <text class="icon-part msfont ms-yinhangka"></text> -->
              <image class="bankImg" src="https://g.yunbisai.com/img/cert/Bankcard.png" mode="scaleToFill"></image>
              <text>添加银行卡</text>
          </view>
          <view class="bottom-btn text-center" @click="addCard('ali')">
              <!-- <text class="icon-part msfont ms-zhifubao"></text> -->
              <image class="zfbImg" src="https://g.yunbisai.com/img/cert/zfbcard.png" mode="scaleToFill"></image>
              <text>绑定支付宝</text>
          </view>
        </view>
    </view>
</template>
<script>
    import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
    import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
    import { getBankList, unBindBank } from "@/common/api.js"
    import { bankCardAttribution } from "@/common/bankcard.js"
    export default {
        name: "bankCard",
        data() {
            return {
                bankcardList:[
                    // { id:'1',bankCard:'中国工商银行',tailNumber:'0694',card:'借记卡',cardType:'1',icon:'ms-ICBC',color:'content-ICBC'},
                    // { id:'12',bankCard:'支付宝账号',tailNumber:'张继科',card:'13221086791',cardType:'2',icon:'ms-ICBC',color:'content-ali'},
                ],
				navigateFlag:false,
                options:[{
                    text: '删除',
                    style: {
                        backgroundColor: '#dd524d'
                    }
                }]
            };
        },
        components: {
            uniSwipeAction,uniSwipeActionItem
        },
        methods: {
            addCard(type){
				if (this.navigateFlag) {
                    return;
                }
                this.navigateFlag = true;
                uni.navigateTo({
                    url: `/pages/wallet/bankCard/addCard?type=${type}`
                })
				setTimeout(() => {
				    this.navigateFlag = false;
				}, 1000)
            },
            getData(){
                let p = getBankList().then((res)=>{
                    const data = res.data
                    if(data.errcode==0){
                        this.bankcardList=[];
                        data.data.length && data.data.forEach((e)=>{
                            this.bankcardList.push({
                                id:e.id,
                                bankCard:e.bank_type=="zfb"?'支付宝账号':e.bank_name,
                                tailNumber:e.bank_type=="zfb"?e.card_name:e.bank_card.slice(-4),
                                card:e.bank_card,
                                card_name:e.card_name,
                                phone:e.phone,
                                cardType:e.bank_type=='zfb'?'2':'1',
                                icon:e.bank_type=="zfb"?'ms-zhifubao':this.getBankIcon(e.bank_card).icon,
                                color:e.bank_type=="zfb"?'#4292f6':this.getBankIcon(e.bank_card).back
                            })
                            // this.bankcardList.push({
                            //     id:e.id,
                            //     bankCard:'支付宝账号',
                            //     card:e.bank_card,
                            //     card_name:e.card_name,
                            //     phone:e.phone,
                            //     cardType:2,
                            //     icon:'ms-zhifubao',
                            //     color:'#4292f6'
                            // })
                        })
                    }else if(data.errcode==1000 || data.errcode==1001){
                        uni.removeStorageSync('token');
                        uni.reLaunch({
                        	url:'/pages/home/welcome'
                        })
                    }else{
                        uni.showToast({
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
                return p;
            },
            getBankIcon(card){
                // console.log(bankCardAttribution(card))
                switch(bankCardAttribution(card).bankCode){
                    case 'zfb':
                      return {icon:'ms-zhifubao',back:'#4292f6'};
                    case 'ICBC' :  //工商
                      return  {icon:'ms-ICBC',back:'#ff535a'}
                    // case 'COMM':   //交通银行
                    //   return  {icon:'ms-COMM',back:'#00408f'}
                    case 'BOC':    //中国银行
                      return  {icon:'ms-BOC',back:'#93172f'}
                    case 'CMB':     //招商银行
                       return  {icon:'ms-CMB',back:'#c8152d'}
                    case 'ABC':     //农业银行
                       return  {icon:'ms-ABC',back:'#079679'}
                    case 'CCB':     //建设银行
                       return  {icon:'ms-CCB',back:'#0d3e9d'}
                    case 'SPDB':     //浦发银行
                       return  {icon:'ms-CCB',back:'#ccc'}
                    default:
                      return  {icon:'ms-yinhangka',back:'#ccc'}
                }
            },
            confirmUnBind(id){
                uni.showModal({
                    title: '提示',
                    content: '确认解绑么？',
                    success: (res) => {
                        if (res.confirm) {
                            this.unbindFun(id)
                        }
                    }
                });
            },
            unbindFun(id){
                unBindBank({id:id}).then((res)=>{
                    const data = res.data
                    if(data.errcode==0){
                        uni.showModal({
                            title: '提示',
                            content: '解绑成功',
                            success: (res) => {
                                if (res.confirm) {

                                }
                                this.getData()
                            }
                        });
                    }else if(data.errcode==1000 || data.errcode==1001 || data.errcode==255){
                        uni.removeStorageSync('token');
                        uni.reLaunch({
                        	url:'/pages/home/welcome'
                        })
                    }else{
                        uni.showToast({
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
            }
        },
        onShow() {
            this.getData()
        }
    };
</script>
<style lang="scss">
    #bankCard {
        position: relative;
        height: 100%;
        .header-block{
            height: 24rpx;
        }
        // .content-ICBC{
        //     background: #FF535A;
        // }
        // .content-ali{
        //     background: #4292F6;
        // }

        .content {
            margin: 20rpx;
            // background: #FF535A;
            border: 2rpx solid transparent;
            border-radius: 20rpx;
            color: #fff;
            padding-top: 16rpx;
            padding-bottom: 16rpx;
            width: 100%;
            .content-top,.content-bottom{
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                padding: 4rpx;
            }
            .content-bottom{
                justify-content: flex-start;
                padding-left: 30rpx;
                .secret-part{
                    white-space: pre;
                    padding-right: 30rpx;
                    position: relative;
                    top: 4rpx;
                }
             }
            .content-title{
                padding: 2rpx;
                padding-left: 30rpx;
                width: 70rpx;
                font-size: 48rpx;
                color: #fff;

            }
            .ms-yinhangka{
                font-size: 40rpx;
            }
            .content-action{
                padding: 10rpx 30rpx;
            }
            .content-text{
                flex: 1;
                .bankcard-name{

                }
                .bankcard-detail{
                    font-size: 24rpx;
                    color: #999;
                }
            },
            .content-ali-part{
                display:flex;
                align-items: center;
            }
        }
        .block{
            height: 120rpx;
        }
        .bottom{
            height: 120rpx;
            line-height: 120rpx;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            font-size: 32rpx;
            background: #fff;
            z-index:999;
            display: flex;
            justify-content: center;
            flex: 1;
            align-items: center;
            .bankImg{
                width: 34rpx;
                height: 26rpx;
                display: block;
                margin: 0 auto;
            }
            .zfbImg{
                width: 80rpx;
                height: 26rpx;
                display: block;
                margin: 0 auto;
            }
            .bottom-btn{
                flex: 1;
            }
            .icon-part{
                display: block;
            }
        }
    }
</style>
